<script setup lang="ts" name="Brother">//setup语法糖
import { ref, reactive, toRefs, toRef, computed, watch, watchEffect, defineExpose, defineProps, withDefaults, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
let name = ref('zhangsan') //ref响应式(RefImpl对象): 基本类型(数字,字符串), 对象(层级不深)
let cars = ref({ brand: '奔驰', price: 100 }) //ref对象(层级不深)
let car = reactive({ brand: '奔驰', price: 100 }) //reactive相应式(Proxy代理函数): 只能对象数组(层级深)
let { brand, price } = toRefs(car) //toRefs: 将reactive中k-v全转为ref,解构赋值为响应式(ObjectRefImpl)
let brands = toRef(car, 'brand') //toRef: 将reactive中某个k-v转为ref
let computedResult = computed({ //计算属性(ref响应式)
  get() {
  },
  set(val) {
  }
})
const stopWatch = watch(name, (newValue, oldValue) => { //监视ref基本类型,不写.value

})
watchEffect(() => { //自动监视:不用指定监视谁,用到就监视,立即监视(一上来就监视)

})
function generalMethod() { //一般方法

}

let toy = ref('佩奇')
import emitter from '@/utils/emitter' //emitter任意组件间传递

// defineProps(['modelValue']) //v-model底层原理
// const emit = defineEmits(['update:modelValue'])
defineProps(['ming', 'mima'])
const emit = defineEmits(['update:ming', 'update:mima'])
</script>

<template> <!--template不编译-->
  <div class="component-name"> <!--vue3无需根标签-->
    兄组件
  </div>
  <div class="component-name">
    <button @click="emitter.emit('send-toy', toy)">emitter任意组件间传递</button> <!--emitter提供数据:触发事件(发布)-->
  </div>
  <!--组件标签v-model传递数据,原生事件$event是dom事件对象(能.target),自定义事件$event是传递的数据(不能.target)-->
  <!-- <input type="text" :value="modelValue" @input="emit('update:modelValue', (<HTMLInputElement>$event.target).value)"> -->
  <input type="text" :value="ming" @input="emit('update:ming', (<HTMLInputElement>$event.target).value)">
  <!--组件标签v-model改名-->

</template>

<style lang="less" scoped>
//less嵌套写法,scoped域:样式只对当前组件有效
.component-name {}
</style>